<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
                                                                                                                                                                                                                                                                                                                                                                                                       
#clock{
width: 500px;
height: 500px;
border: 5px solid gray;
margin: 0 auto;
position: relative;
background: black;
border-radius: 50%;
box-shadow: 0 0 15px black;
}
.scale{
width: 30px;
height: 30px;
position: absolute;
left: calc(50% - 15px);
top: 30px;
color: white;
transform-origin: 15px 220px;




}
.scale span{
display: block;
text-shadow: 0 5px 20px lightgray;
width: 100%;
height: 100%;
text-align: center;
line-height: 30px;
font-size: 20px;
/*background: red;*/

}
#hour{
width: 8px;
height: 100px;
position: absolute;
background: white;
left: calc(50% - 4px);
top: 150px; /*将所有表针底部定位在表盘中心*/
transform-origin: center bottom;
border-radius: 40% 40% 0% 0%;
}
#minute{
width: 6px;
height: 180px;
position: absolute;
background: white;
left: calc(50% - 3px);
top: 70px;
transform-origin: center bottom;
border-radius: 40% 40% 0% 0%;


}
#second{
width: 4px;
height: 200px;
position: absolute;
background: white;
left: calc(50% - 2px);
top: 50px;
transform-origin: center bottom;
border-radius: 40% 40% 0% 0%;


}
#spike{
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgray;
position: absolute;
left: calc(50% - 10px);
top: calc(50% - 10px);
}
.key{
width: 2px;
height: 15px;
border:1px solid white;
position: absolute;
top: 0;
left: calc(50% - 1px);
background: white;
transform-origin: 2px 249px;
}
.long{
width: 3px;
height: 25px;
}
</style>
</head>
<body>
<div id="clock">
<div class="scale"><span>12</span></div>
<div class="scale"><span>1</span></div>
<div class="scale"><span>2</span></div>
<div class="scale"><span>3</span></div>
<div class="scale"><span>4</span></div>
<div class="scale"><span>5</span></div>
<div class="scale"><span>6</span></div>
<div class="scale"><span>7</span></div>
<div class="scale"><span>8</span></div>
<div class="scale"><span>9</span></div>
<div class="scale"><span>10</span></div>
<div class="scale"><span>11</span></div>
<!-- 表盘刻度 -->
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key long"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<!-- 表的指针 -->
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
<!-- 表中心得原点 -->
<div id="spike"></div>
</div>
</body>
<script>
var scales = document.querySelectorAll(".scale");//1~12的div
var sps = document.querySelectorAll(".scale span");//1~12时间
var keys = document.querySelectorAll(".key");//表上面的指针
//初始化表盘
for(var i = 0 ; i < scales.length ; i++){
// 12个刻度共360deg，那么每个客服需要旋转30deg
scales[i].style.transform = "rotate("+i*30+"deg)";
// 父级元素发生旋转，自己元素也会随之发生旋转，所以刻度显示数字会发生角度秦谢，需要将每一个div中的span逆时针旋转相同的角度吧数值摆正
sps[i].style.transform = "rotate("+(-i*30)+"deg)";
console.log( "rotate("+(-i*30)+"deg)")
}
for(var i = 0 ; i < keys.length ; i ++){
keys[i].style.transform = "rotate("+i*6+"deg)";
console.log(keys[i]);
console.log("rotate("+i*6+"deg)")
}
// 获取当前时间并将时间转化为对应的角度
function initTime(){
var date = new Date();
console.log(date);


var sNum = date.getSeconds();
sDeg = sNum*6;
second.style.transform = "rotate("+sDeg+"deg)";

// 将分钟转化为角度，1m = 6deg

var mNum = date.getMinutes();
mDeg = mNum*6 + sNum*6/60;
minute.style.transform = "rotate("+mDeg+"deg)";


// 将小时转化为角度
// 1h对应的角度是360/12=30deg

var hNum = date.getHours();
console.log(hNum);
hNum = hNum >12 ? hNum - 12 : hNum;
hDeg =hNum*30 + mNum*30/60;
console.log(hDeg);
// 将对应角度显示在表盘上
hour.style.transform  = "rotate("+hDeg+"deg)";
}
setInterval(initTime,1000); 
</script>
</html>

